:root {
     --cream: #f7f4ef;
     --charcoal: #1c1c1e;
     --taupe: #b5a99a;
     --accent: #c0392b;
     --card-radius: 14px;
     --map-bg: #e8e3da;
 }

 body {
     background: var(--cream);
     font-family: 'DM Sans', sans-serif;
     color: var(--charcoal);
     min-height: 100vh;
 }

 /* ── Filter bar ──────────────────────────────── */
 .filter-bar {
     background: #fff;
     border-bottom: 1px solid #e5e0d8;
     padding: 10px 20px;
     display: flex;
     align-items: center;
     gap: 10px;
 }

 .filter-bar span {
     font-size: 13px;
     font-weight: 500;
     color: var(--taupe);
     letter-spacing: .04em;
     text-transform: uppercase;
 }

 .filter-btn {
     display: flex;
     align-items: center;
     gap: 6px;
     background: var(--charcoal);
     color: #fff;
     border: none;
     border-radius: 20px;
     padding: 5px 14px;
     font-size: 13px;
     font-family: 'DM Sans', sans-serif;
     cursor: pointer;
     transition: background .2s;
 }

 .filter-btn:hover {
     background: #333;
 }

 /* ── Layout ──────────────────────────────────── */
 .search-layout {
     display: grid;
     grid-template-columns: 300px 1fr;
     height: calc(100vh - 49px);
     overflow: hidden;
 }

 /* ── Card list ───────────────────────────────── */
 .card-list {
     overflow-y: auto;
     padding: 16px 14px;
     background: var(--cream);
     scrollbar-width: thin;
     scrollbar-color: var(--taupe) transparent;
 }

 .hotel-card {
     background: #fff;
     border-radius: var(--card-radius);
     overflow: hidden;
     margin-bottom: 16px;
     box-shadow: 0 2px 12px rgba(0, 0, 0, .07);
     transition: transform .2s, box-shadow .2s;
     cursor: pointer;
 }

 .hotel-card:hover {
     transform: translateY(-3px);
     box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
 }

 /* Image carousel */
 .card-carousel {
     position: relative;
     height: 190px;
     background: #ddd;
     overflow: hidden;
 }

 .card-carousel img {
     width: 100%;
     height: 100%;
     object-fit: cover;
 }

 .carousel-btn {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     background: rgba(255, 255, 255, .85);
     border: none;
     border-radius: 50%;
     width: 30px;
     height: 30px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 14px;
     color: var(--charcoal);
     cursor: pointer;
     transition: background .2s;
     z-index: 2;
 }

 .carousel-btn:hover {
     background: #fff;
 }

 .carousel-btn.prev {
     left: 10px;
 }

 .carousel-btn.next {
     right: 10px;
 }

 .wishlist-btn {
     position: absolute;
     top: 10px;
     right: 10px;
     background: rgba(255, 255, 255, .85);
     border: none;
     border-radius: 50%;
     width: 32px;
     height: 32px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 16px;
     color: var(--accent);
     cursor: pointer;
     z-index: 2;
     transition: background .2s;
 }

 .wishlist-btn:hover {
     background: #fff;
 }

 /* Card body */
 .card-body-inner {
     padding: 14px 16px 16px;
 }

 .card-tag {
     font-size: 10px;
     font-weight: 500;
     letter-spacing: .1em;
     text-transform: uppercase;
     color: var(--taupe);
     margin-bottom: 4px;
 }

 .card-title {
     font-family: 'Cormorant Garamond', serif;
     font-size: 20px;
     font-weight: 700;
     color: var(--charcoal);
     margin-bottom: 4px;
     line-height: 1.2;
 }

 .card-desc {
     font-size: 12.5px;
     color: #888;
     margin-bottom: 12px;
     line-height: 1.5;
 }

 .card-footer-row {
     display: flex;
     align-items: center;
     justify-content: space-between;
 }

 .price-tag {
     font-size: 13px;
     color: var(--charcoal);
     font-weight: 500;
 }

 .score-badge {
     display: flex;
     align-items: center;
     gap: 6px;
 }

 .score-label {
     font-size: 11px;
     color: #888;
     text-align: right;
     line-height: 1.3;
 }

 .score-num {
     background: #1a6e3c;
     color: #fff;
     font-size: 13px;
     font-weight: 700;
     border-radius: 6px 6px 6px 0;
     padding: 4px 8px;
     font-family: 'DM Sans', sans-serif;
 }

 /* ── Map panel ───────────────────────────────── */
 .map-panel {
     position: relative;
     background: var(--map-bg);
     overflow: hidden;
 }

 /* Fake map using CSS art */
 .map-canvas {
     width: 100%;
     height: 100%;
     position: relative;
     background: #e9e4d9;
 }

 /* Roads */
 .map-canvas::before {
     content: '';
     position: absolute;
     inset: 0;
     background:
         repeating-linear-gradient(0deg, transparent, transparent 59px, rgba(255, 255, 255, .55) 60px),
         repeating-linear-gradient(90deg, transparent, transparent 79px, rgba(255, 255, 255, .55) 80px);
 }

 /* Water (Lake Michigan) */
 .lake {
     position: absolute;
     right: 0;
     top: 0;
     bottom: 0;
     width: 22%;
     background: linear-gradient(135deg, #a8d4e8 0%, #78b8d8 100%);
     clip-path: polygon(20% 0%, 100% 0%, 100% 100%, 10% 100%, 0% 60%);
 }

 /* River */
 .river {
     position: absolute;
     top: 38%;
     left: 10%;
     right: 30%;
     height: 14px;
     background: rgba(120, 184, 216, .6);
     border-radius: 8px;
     transform: rotate(-2deg);
 }

 .river::after {
     content: '';
     position: absolute;
     top: 20px;
     left: -5%;
     right: -5%;
     height: 10px;
     background: rgba(120, 184, 216, .45);
     border-radius: 8px;
     transform: rotate(1.5deg);
 }

 /* Park blocks */
 .park {
     position: absolute;
     background: rgba(120, 185, 100, .35);
     border-radius: 4px;
 }

 /* Price pins */
 .pin {
     position: absolute;
     background: #1e3a5f;
     color: #fff;
     font-size: 11px;
     font-weight: 700;
     font-family: 'DM Sans', sans-serif;
     border-radius: 4px;
     padding: 3px 7px;
     cursor: pointer;
     transition: transform .15s, background .15s;
     white-space: nowrap;
     box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
 }

 .pin::after {
     content: '';
     position: absolute;
     bottom: -5px;
     left: 50%;
     transform: translateX(-50%);
     border-left: 5px solid transparent;
     border-right: 5px solid transparent;
     border-top: 5px solid #1e3a5f;
 }

 .pin:hover,
 .pin.active {
     background: var(--accent);
     transform: scale(1.1) translateY(-2px);
 }

 .pin:hover::after,
 .pin.active::after {
     border-top-color: var(--accent);
 }

 /* Search on map button */
 .map-search-bar {
     position: absolute;
     top: 12px;
     left: 50%;
     transform: translateX(-50%);
     width: min(320px, 80%);
     background: #fff;
     border-radius: 24px;
     box-shadow: 0 2px 12px rgba(0, 0, 0, .15);
     display: flex;
     align-items: center;
     gap: 8px;
     padding: 9px 16px;
     z-index: 10;
     font-size: 13px;
     color: #aaa;
 }

 .map-search-bar i {
     font-size: 15px;
 }

 .close-map-btn {
     position: absolute;
     top: 12px;
     right: 14px;
     background: #fff;
     border: none;
     border-radius: 20px;
     padding: 7px 14px;
     font-size: 12px;
     font-weight: 500;
     font-family: 'DM Sans', sans-serif;
     box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
     cursor: pointer;
     z-index: 10;
     display: flex;
     align-items: center;
     gap: 6px;
     transition: background .2s;
 }

 .close-map-btn:hover {
     background: #f0ebe3;
 }

 /* Zoom controls */
 .zoom-controls {
     position: absolute;
     bottom: 24px;
     right: 14px;
     display: flex;
     flex-direction: column;
     gap: 2px;
     z-index: 10;
 }

 .zoom-btn {
     width: 32px;
     height: 32px;
     background: #fff;
     border: none;
     border-radius: 4px;
     font-size: 18px;
     font-weight: 300;
     display: flex;
     align-items: center;
     justify-content: center;
     box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
     cursor: pointer;
     color: var(--charcoal);
     transition: background .15s;
 }

 .zoom-btn:hover {
     background: #f5f5f5;
 }

 /* Tooltip popup */
 .map-tooltip {
     position: absolute;
     background: #fff;
     border-radius: 10px;
     box-shadow: 0 4px 20px rgba(0, 0, 0, .18);
     padding: 10px 14px;
     width: 180px;
     z-index: 20;
     font-size: 12px;
     display: none;
     pointer-events: none;
 }

 .map-tooltip.visible {
     display: block;
 }

 .map-tooltip .tt-name {
     font-family: 'Cormorant Garamond', serif;
     font-size: 15px;
     font-weight: 700;
     margin-bottom: 2px;
 }

 .map-tooltip .tt-score {
     color: #1a6e3c;
     font-weight: 700;
 }

 /* ── Responsive ─────────────────────────────── */

 /* Mobile tab bar to toggle list / map */
 .mobile-tabs {
     display: none;
     position: fixed;
     bottom: 0;
     left: 0;
     right: 0;
     z-index: 50;
     background: #fff;
     border-top: 1px solid #e5e0d8;
     padding: 8px 16px 14px;
     gap: 10px;
 }

 .tab-btn {
     flex: 1;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 7px;
     padding: 10px;
     border-radius: 12px;
     border: none;
     font-family: 'DM Sans', sans-serif;
     font-size: 13px;
     font-weight: 500;
     cursor: pointer;
     transition: background .2s, color .2s;
     background: var(--cream);
     color: var(--taupe);
 }

 .tab-btn.active {
     background: var(--charcoal);
     color: #fff;
 }

 .tab-btn i {
     font-size: 16px;
 }

 @media (max-width: 768px) {
     body {
         overflow: hidden;
     }

     /* Filter bar — horizontally scrollable */
     .filter-bar {
         overflow-x: auto;
         overflow-y: hidden;
         flex-wrap: nowrap;
         padding: 8px 14px;
         scrollbar-width: none;
         -webkit-overflow-scrolling: touch;
     }

     .filter-bar::-webkit-scrollbar {
         display: none;
     }

     .filter-bar span {
         white-space: nowrap;
         flex-shrink: 0;
     }

     .filter-btn {
         flex-shrink: 0;
         white-space: nowrap;
     }

     /* Main layout: full-screen single panel */
     .search-layout {
         display: block;
         height: calc(100dvh - 49px - 62px);
         position: relative;
         overflow: hidden;
     }

     /* Card list panel */
     .card-list {
         position: absolute;
         inset: 0;
         max-height: none;
         padding: 12px 12px 16px;
         overflow-y: auto;
         -webkit-overflow-scrolling: touch;
         transition: opacity .25s, transform .25s;
         background: var(--cream);
         z-index: 1;
     }

     .card-list.hidden {
         opacity: 0;
         pointer-events: none;
         transform: translateX(-16px);
     }

     /* Horizontal compact hotel card */
     .hotel-card {
         display: flex;
         flex-direction: row;
         height: 118px;
         margin-bottom: 10px;
     }

     .card-carousel {
         width: 118px;
         min-width: 118px;
         height: 100%;
         flex-shrink: 0;
         border-radius: 0;
     }

     .carousel-btn {
         display: none;
     }

     .wishlist-btn {
         width: 28px;
         height: 28px;
         font-size: 13px;
         top: 7px;
         right: 7px;
     }

     .card-body-inner {
         padding: 10px 12px;
         display: flex;
         flex-direction: column;
         justify-content: space-between;
         flex: 1;
         min-width: 0;
         overflow: hidden;
     }

     .card-title {
         font-size: 16px;
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
     }

     .card-desc {
         display: none;
     }

     .card-tag {
         margin-bottom: 2px;
     }

     .price-tag {
         font-size: 12px;
     }

     .score-label {
         font-size: 10px;
     }

     .score-num {
         font-size: 12px;
         padding: 3px 6px;
     }

     /* Map panel */
     .map-panel {
         position: absolute;
         inset: 0;
         opacity: 0;
         pointer-events: none;
         transition: opacity .25s;
         z-index: 1;
     }

     .map-panel.visible {
         opacity: 1;
         pointer-events: all;
     }

     .map-canvas {
         height: 100%;
     }

     .close-map-btn {
         display: none;
     }

     .map-search-bar {
         width: min(240px, 65%);
         font-size: 12px;
         padding: 7px 12px;
         top: 10px;
     }

     /* Show tab bar */
     .mobile-tabs {
         display: flex;
     }

     /* Filter drawer → bottom sheet */
     .filter-drawer {
         top: auto;
         right: 0;
         left: 0;
         bottom: 0;
         width: 100%;
         max-width: 100%;
         height: 88vh;
         border-radius: 20px 20px 0 0;
         transform: translateY(100%);
         box-shadow: 0 -8px 40px rgba(0, 0, 0, .15);
     }

     .filter-drawer.open {
         transform: translateY(0);
     }

     /* Drag handle */
     .drawer-header {
         position: relative;
         padding-top: 26px;
     }

     .drawer-header::before {
         content: '';
         position: absolute;
         top: 10px;
         left: 50%;
         transform: translateX(-50%);
         width: 36px;
         height: 4px;
         background: #ddd;
         border-radius: 4px;
     }

     .amenity-grid {
         grid-template-columns: 1fr 1fr;
     }

     .score-btns {
         flex-wrap: wrap;
     }
 }

 @media (max-width: 480px) {
     .hotel-card {
         height: 106px;
     }

     .card-carousel {
         width: 100px;
         min-width: 100px;
     }

     .card-title {
         font-size: 15px;
     }

     .filter-bar span {
         display: none;
     }

     .map-search-bar {
         width: min(200px, 58%);
     }
 }

 @media (min-width: 769px) and (max-width: 1024px) {
     .search-layout {
         grid-template-columns: 260px 1fr;
     }

     .card-carousel {
         height: 158px;
     }

     .card-title {
         font-size: 18px;
     }
 }

 @media (min-width: 1280px) {
     .search-layout {
         grid-template-columns: 340px 1fr;
     }
 }

 /* ── Filter Drawer Overlay ───────────────────── */
 .filter-overlay {
     position: fixed;
     inset: 0;
     background: rgba(28, 28, 30, .45);
     backdrop-filter: blur(3px);
     z-index: 100;
     opacity: 0;
     pointer-events: none;
     transition: opacity .3s ease;
 }

 .filter-overlay.open {
     opacity: 1;
     pointer-events: all;
 }

 .filter-drawer {
     position: fixed;
     top: 0;
     right: 0;
     bottom: 0;
     width: 380px;
     max-width: 95vw;
     background: #fff;
     z-index: 101;
     display: flex;
     flex-direction: column;
     transform: translateX(100%);
     transition: transform .35s cubic-bezier(.4, 0, .2, 1);
     box-shadow: -8px 0 40px rgba(0, 0, 0, .15);
 }

 .filter-drawer.open {
     transform: translateX(0);
 }

 .drawer-header {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 20px 24px 18px;
     border-bottom: 1px solid #f0ebe3;
 }

 .drawer-title {
     font-family: 'Cormorant Garamond', serif;
     font-size: 22px;
     font-weight: 700;
     color: var(--charcoal);
 }

 .drawer-close {
     background: var(--cream);
     border: none;
     border-radius: 50%;
     width: 34px;
     height: 34px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 16px;
     color: var(--charcoal);
     cursor: pointer;
     transition: background .2s;
 }

 .drawer-close:hover {
     background: #ede8df;
 }

 .drawer-body {
     flex: 1;
     overflow-y: auto;
     padding: 24px;
     scrollbar-width: thin;
     scrollbar-color: var(--taupe) transparent;
 }

 /* Section */
 .filter-section {
     margin-bottom: 28px;
 }

 .filter-section-title {
     font-size: 11px;
     font-weight: 600;
     letter-spacing: .1em;
     text-transform: uppercase;
     color: var(--taupe);
     margin-bottom: 14px;
 }

 /* Star rating chips */
 .star-chips {
     display: flex;
     gap: 8px;
     flex-wrap: wrap;
 }

 .star-chip {
     display: flex;
     align-items: center;
     gap: 4px;
     border: 1.5px solid #e5e0d8;
     border-radius: 20px;
     padding: 5px 14px;
     font-size: 13px;
     font-family: 'DM Sans', sans-serif;
     color: var(--charcoal);
     cursor: pointer;
     background: #fff;
     transition: border-color .15s, background .15s, color .15s;
     user-select: none;
 }

 .star-chip.selected {
     background: var(--charcoal);
     color: #fff;
     border-color: var(--charcoal);
 }

 .star-chip:hover:not(.selected) {
     border-color: var(--charcoal);
 }

 /* Price range slider */
 .price-range-row {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 12px;
 }

 .price-display {
     font-size: 14px;
     font-weight: 500;
     color: var(--charcoal);
 }

 .price-display span {
     color: var(--taupe);
     font-size: 12px;
     font-weight: 400;
 }

 .range-track {
     position: relative;
     height: 4px;
     background: #e5e0d8;
     border-radius: 4px;
     margin: 10px 0 6px;
 }

 .range-fill {
     position: absolute;
     height: 100%;
     background: var(--charcoal);
     border-radius: 4px;
     pointer-events: none;
 }

 input[type="range"] {
     -webkit-appearance: none;
     appearance: none;
     width: 100%;
     height: 4px;
     background: transparent;
     outline: none;
     cursor: pointer;
     position: absolute;
     top: 0;
     left: 0;
     pointer-events: none;
 }

 input[type="range"]::-webkit-slider-thumb {
     -webkit-appearance: none;
     width: 18px;
     height: 18px;
     border-radius: 50%;
     background: var(--charcoal);
     border: 2.5px solid #fff;
     box-shadow: 0 1px 6px rgba(0, 0, 0, .25);
     cursor: pointer;
     pointer-events: all;
     margin-top: -7px;
 }

 input[type="range"].range-max {
     z-index: 1;
 }

 .range-labels {
     display: flex;
     justify-content: space-between;
     font-size: 11px;
     color: var(--taupe);
     margin-top: 8px;
 }

 /* Score threshold */
 .score-btns {
     display: flex;
     gap: 8px;
     flex-wrap: wrap;
 }

 .score-btn {
     border: 1.5px solid #e5e0d8;
     border-radius: 20px;
     padding: 5px 14px;
     font-size: 13px;
     font-family: 'DM Sans', sans-serif;
     color: var(--charcoal);
     cursor: pointer;
     background: #fff;
     transition: border-color .15s, background .15s, color .15s;
     user-select: none;
 }

 .score-btn.selected {
     background: var(--charcoal);
     color: #fff;
     border-color: var(--charcoal);
 }

 .score-btn:hover:not(.selected) {
     border-color: var(--charcoal);
 }

 /* Property type checkboxes */
 .prop-list {
     display: flex;
     flex-direction: column;
     gap: 10px;
 }

 .prop-item {
     display: flex;
     align-items: center;
     gap: 12px;
     cursor: pointer;
     user-select: none;
     padding: 10px 14px;
     border: 1.5px solid #f0ebe3;
     border-radius: 10px;
     transition: border-color .15s, background .15s;
 }

 .prop-item:hover {
     border-color: var(--taupe);
 }

 .prop-item.selected {
     border-color: var(--charcoal);
     background: var(--cream);
 }

 .prop-check {
     width: 20px;
     height: 20px;
     border-radius: 4px;
     border: 2px solid #d0c8be;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
     transition: background .15s, border-color .15s;
     font-size: 11px;
     color: #fff;
 }

 .prop-item.selected .prop-check {
     background: var(--charcoal);
     border-color: var(--charcoal);
 }

 .prop-icon {
     font-size: 18px;
     width: 22px;
     text-align: center;
     color: var(--taupe);
 }

 .prop-item.selected .prop-icon {
     color: var(--charcoal);
 }

 .prop-label {
     font-size: 14px;
     font-weight: 400;
     flex: 1;
 }

 .prop-count {
     font-size: 12px;
     color: var(--taupe);
 }

 /* Amenities */
 .amenity-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 8px;
 }

 .amenity-chip {
     display: flex;
     align-items: center;
     gap: 7px;
     border: 1.5px solid #e5e0d8;
     border-radius: 8px;
     padding: 8px 12px;
     font-size: 13px;
     font-family: 'DM Sans', sans-serif;
     cursor: pointer;
     background: #fff;
     transition: border-color .15s, background .15s, color .15s;
     user-select: none;
 }

 .amenity-chip i {
     font-size: 14px;
     color: var(--taupe);
 }

 .amenity-chip.selected {
     background: var(--cream);
     border-color: var(--charcoal);
 }

 .amenity-chip.selected i {
     color: var(--charcoal);
 }

 .amenity-chip:hover:not(.selected) {
     border-color: var(--taupe);
 }

 /* Drawer footer */
 .drawer-footer {
     padding: 16px 24px;
     border-top: 1px solid #f0ebe3;
     display: flex;
     gap: 10px;
 }

 .btn-reset {
     flex: 1;
     background: var(--cream);
     border: none;
     border-radius: 20px;
     padding: 11px;
     font-size: 13px;
     font-weight: 500;
     font-family: 'DM Sans', sans-serif;
     color: var(--charcoal);
     cursor: pointer;
     transition: background .2s;
 }

 .btn-reset:hover {
     background: #ede8df;
 }

 .btn-apply {
     flex: 2;
     background: var(--charcoal);
     border: none;
     border-radius: 20px;
     padding: 11px;
     font-size: 13px;
     font-weight: 500;
     font-family: 'DM Sans', sans-serif;
     color: #fff;
     cursor: pointer;
     transition: background .2s;
 }

 .btn-apply:hover {
     background: #333;
 }